<template>
	<view class="content">
		<view class="info">
			<view style="display: flex;" @tap='tosetting'>
				<image :src="data.img" mode="widthFix"></image>
				<view class="phone">{{data.phone}} <text style="margin-left: 10rpx;">></text> </view>
			</view>
			
			<view class="phone" style="color: #ff743a;font-weight: bold;">{{levelName}}</view>
		</view>
		
		<view class="balnce" :style="{'background': 'url('+balanceImg+')','background-size':size}">
			<view class="balance-one" @tap='balanceLog'>
				<view class="title">
					我的钱包余额
				</view>
				<image src="../../static/my/eye.png" mode="widthFix"></image>
				<image src="../../static/my/myjintou2.png" style="width: 18rpx;height: 18rpx;margin: 15rpx 0 0 10rpx;"  mode="widthFix"></image>
			</view>
			<view class="balance-two" @tap="toGorule">
				<image src="../../static/my/gold.png" style="width: 40rpx;height: 40rpx;margin: 0 10rpx;"  mode="widthFix"></image>
				{{data.balance*1+data.silver*1}}
				<image src="../../static/my/myjintou2.png" style="width: 18rpx;height: 18rpx;margin-left: 20rpx;"  mode="widthFix"></image>
			</view>
		
		</view>
	
		<view style="text-align: center;background-color: #008cbc;color: white; border-radius: 40rpx;height: 60rpx;margin-top: 20rpx;" @tap="goteams"  v-if="level > 0">
			<view style="line-height: 60rpx;">伙伴管理</view>
		</view>
		<view class="yaoqing" :style="{'background': 'url('+yaoqingImg+')','background-size':size}">
			<button class="yaoqing-btn" open-type="share"></button>
		</view>
		
		<view class="equi-list">
			<view class='equi-sum'>
				<view class="equi-sum-money">{{data.self+data.euqs}}</view>
				<view class="equi-sum-text">总设备(台)</view>
			</view>
			<view class="equi-info">
				<view class='equi-info-my'>
					<view class='equi-info-my-box' @tap="toEqu(4,0)">
						<view class='equi-info-my-box-money'>{{data.self}}</view>
						<view class='equi-info-my-box-img'>自有设备<image src="../../static/my/myjintou.png" mode="widthFix"></image></view>
					</view>
					<view class='equi-info-my-box' @tap="toZuo">
						<view class='equi-info-my-box-money'>{{data.self_profit}}</view>
						<view class='equi-info-my-box-img'>昨日收入<image src="../../static/my/myjintou.png" mode="widthFix"></image></view>
					</view>
				</view>
				<view class="equi-info-line"></view>
				<view class='equi-info-my'>
					<view class='equi-info-my-box' @tap='togengduo'>
						<view class='equi-info-my-box-money'>{{data.euqs}}</view>
						<view class='equi-info-my-box-img'>伙伴设备<image src="../../static/my/myjintou.png" mode="widthFix"></image></view>
					</view>
					<view class='equi-info-my-box' @tap="toZuoShare">
						<view class='equi-info-my-box-money'>{{data.friend_profit}}</view>
						<view class='equi-info-my-box-img'>昨日分润<image src="../../static/my/myjintou.png" mode="widthFix"></image></view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="order">
			<view class="order-head"  @tap='toOrder'>
				<view class="order-head-title" style="font-weight: bold;color: #999999;">我的订单</view>
				<view class="order-head-btn">全部<image src="../../static/my/myjintou.png" mode="widthFix"></image></view>
			</view>
			<view class="order-icon">
				<view  class="order-icon-box">
					<image src="../../static/my/dfh.png" mode=""></image>
					<view class="">
						待发货
					</view>
				</view>
				<view  class="order-icon-box">
					<image src="../../static/my/yfh.png" mode=""></image>
					<view class="">
						已发货
					</view>
				</view>
				<view  class="order-icon-box">
					<image src="../../static/my/ts.png" mode=""></image>
					<view class="">
						退货/售后
					</view>
				</view>
			</view>
		</view> -->
		
		
		<!-- <Modal
			v-model="show1" 
			title='温馨提示' 
			:text="msg"
			confirm-text='确定'
			noCancel=true
			@confirm='confirm()'
		/> -->
		<view class="box" v-if="show"  @tap="coneal"></view>
		
		<view class="modal" v-if="show">
			<view class="title">
				选择类型
			</view>
			<view class="content">
				<view>
					<label class="radio" style="margin-right: 30rpx;" @tap="change(3)">
						<radio value="电视盒子" :checked="!checked" color="#4CD964"/>TV-Box
					</label>
				</view>
				<view>
					<label class="radio" style="margin-right: 30rpx;" @tap="change(2)">
						<radio value="X86盒子" :checked="checked" color="#4CD964"/>工控机
					</label>
				</view>
			</view>
			<view class="btn-group">
				<view class="coneal" @tap="coneal">取消</view>
				<view class="submit" @tap="comfim">确认</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	let App = getApp();
	import Modal from '@/components/x-modal/x-modal'
	export default {
		components: {
			Modal
		},
		data() {
			return {
				data: {
					phone: '点击登录',
					balance: 0,
					profit: 0,
					total_num: 0,
					silver:0,
					nextLevel:'无',
					self:0,
					euqs:0,
					self_profit:0,
					friend_profit:0,
				},
				msg:'正在搜索设备',
				show1:false,
				barCode:'',
				show:false,
				sn:'',
				type:3,
				checked:false,
				list:[],
				level:0,
				levelName:'',
				balanceImg:'https://yunzhidun.oss-cn-beijing.aliyuncs.com/pool/image/my.png',
				yaoqingImg:"https://yunzhidun.oss-cn-beijing.aliyuncs.com/pool/image/tuijian2.png",
				imageShare:'https://yunzhidun.oss-cn-beijing.aliyuncs.com/pool/image/tjfx.png',
				size:'100% 100%'
			}
		},
		onLoad(option) {
			
		},
		onShow() {
			uni.hideShareMenu()
			this.sys = App.globalData.sys
			this.getimg8()
			this.getimg9()
			this.getimg5()
			this.getInfo()
		},
		
		methods: {
			
			//跳转到伙伴管理
			goteams(){
				uni.navigateTo({
					url:'/pages/my/teammanage'
				})
			},
			
			getimg8(){
				
				uni.showLoading({
					title:"加载中"
				})
				
				this.$api.interfaceApi('getImg')({
					'sys':App.globalData.sys,
					'index':8
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.balanceImg =  res.data
					}
				
				})
			},
			
			getimg9(){
				
				uni.showLoading({
					title:"加载中"
				})
				
				this.$api.interfaceApi('getImg')({
					'sys':App.globalData.sys,
					'index':9
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.yaoqingImg =  res.data
					}
				
				})
			},
			getimg5(){
				
				uni.showLoading({
					title:"加载中"
				})
				
				this.$api.interfaceApi('getImg')({
					'sys':App.globalData.sys,
					'index':5
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.imageShare =  res.data
					}
				
				})
			},
			
			toOrder(){
				uni.navigateTo({
					url:'/pages/my/order'
				})
			},
			
			gorule(){
				uni.navigateTo({
					url:'/pages/my/rule'
				})
			},

			
			toGorule(){
				let userinfo = uni.getStorageSync('userinfo');

				
				uni.navigateTo({
					url:`/pages/my/gorule?balance=${this.data.balance}`
				})
				
			},
			
			balanceLog(){
				uni.navigateTo({
					url:'/pages/my/balance-log'
				})
			},
			
			toShare(){
				uni.navigateTo({
					url:'/pages/my/share'
				})
			},
			getInfo(){
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('getInfo')({
					'user_id':userinfo.id
				}).then(res=>{
					if(res.code == 200){
						this.data = res.data
						this.list = res.data.list
						this.level = res.data.level
						this.levelName = res.data.levelName
						
					}
					uni.hideLoading()
				})
			},
			tosetting(){
				uni.navigateTo({
					url:`/pages/my/setting?nickname=${this.data.phone}`
				})
			},
			togengduo(){
				uni.navigateTo({
					url:'/pages/my/team'
				})
			},
			toproduct(){
				uni.switchTab({
					url:'/pages/product/index'
				})
			},
			code(){
				let _this = this;
				
				uni.scanCode({
				    success: function (res) {
						_this.show = true;
						_this.sn = res.result
				    }
				});
			},
						
			add(){
				this.show1 = true	
				let userinfo = uni.getStorageSync('userinfo');
				this.$api.interfaceApi('addEqu')({
					"id":userinfo.id
				}).then(res=>{
					setTimeout(() => {
						this.msg = res.msg
					}, 2000);
				})
			},
			confirm(){
				this.msg = '正在搜索设备'
			},
			
			coneal(){
				this.show = false
			},
			
			comfim(){
				let userinfo = uni.getStorageSync('userinfo');
				this.$api.interfaceApi('add')({
					'sn':this.sn,
					"id":userinfo.id,
					'admin_id':App.globalData.sys,
					'type':this.type
				}).then(res=>{
					this.show = false
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				})
			},
			
			change(num){
				if(num == 2){
					this.checked = true
					this.type = 2
				}else if(num == 3){
					this.checked = false
					this.type = 3
				}
			},
			
			
			onShareAppMessage(e) {
				let userinfo = uni.getStorageSync('userinfo');
				
				let shareInfo = {
					path: "/pages/register/registerkq?uid="+userinfo.id,
					title: "赶紧跟我一起来体验！",
					imageUrl: this.imageShare
				};
				return shareInfo;
			},
			
			upLevel(){
				uni.navigateTo({
					url:`/pages/news/news?sys=${this.sys}&type=2`
				})
			},
			
			toGoods(){
				uni.switchTab({
					url:'/pages/product/index'
				})
			},
			
			toSheng(){
				if(this.level == 0){
					uni.showToast({
						icon:'none',
						title:'对不起您无权限！'
					})
				}
			},
			toEqu(value,index){
				uni.setStorageSync('equValue',value);
				uni.setStorageSync('equIndex',index);
				uni.switchTab({
					url:`/pages/equipment/index`
				})
			},
			
			toZuo(){
				uni.navigateTo({
					url:`/pages/my/revenue-details?sum=${this.data.self}`
				})
			},
			toZuoShare(){
				uni.navigateTo({
					url:`/pages/my/share-details?sum=${this.data.self_profit}`
				})
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.content{
			padding: 0 30rpx;
			.info{
				height: 50rpx;
				image{
					width: 50rpx;
					height: 50rpx;
					border-radius: 50rpx;
					margin-right: 20rpx;
				}
				line-height: 49rpx;
				display: flex;
				justify-content: space-between;
			}
			
			.balnce{
				color: #FFFFFF;
				/* background: url(https://yunzhidun.oss-cn-beijing.aliyuncs.com/pool/image/my.png);
				background-size: 100% 100%; */
				margin-top: 20rpx;
				padding: 50rpx 50rpx;
				position: relative;
				height: 240rpx;
				box-sizing: border-box;
				.balance-one{
					display: flex;
					justify-content: center;
					.title{
						font-size: 40rpx;
						margin-right: 10rpx;
					}
					image{
						width: 50rpx;
						height: 50rpx;
						margin-top: 15rpx;
					}
				}
				
				.balance-two{
					margin-top: 10rpx;
					text-align: center;
					font-size: 50rpx;
				}
				
				.balance-three{
					font-size: 34rpx;
					margin-top: 10rpx;
					padding: 0 50rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
				}
				
				
				
			}
			
			.select{
				//display: flex;
				//justify-content: space-between;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				margin-top: 30rpx;
				padding: 20rpx;
				box-sizing: border-box;
				line-height: 52rpx;
				height: 90rpx;
				.dis{
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;
				}
				/* image{
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
					margin-top: 7rpx;
				}
				.collection-account{
					display: flex;
					justify-content: space-between;
				}
				.embodied-rules{
					display: flex;
					justify-content: space-between;
				} */
			}
			
			.img{
				height: 90rpx;
				margin-top: 30rpx;
				image{
					width: 100%;
				}
			}
			
			.about-my{
				display: flex;
				margin-top: 30rpx;
				padding: 20rpx 40rpx;
				background-color: #FFFFFF;
				image{
					width: 50rpx;
					margin-right: 20rpx;
				}
				.arrow{
					margin-left: 380rpx;
				}
			}
			.login-out{
				background-color: #FFFFFF;
				margin-top: 20rpx;
				border-radius: 20rpx;
				padding: 20rpx 60rpx;
			}
			.yaoqing{
				margin-top: 20rpx;
				height: 180rpx;
				border-radius: 20rpx;
				/* background: url(https://yunzhidun.oss-cn-beijing.aliyuncs.com/pool/image/tuijian2.png);
				background-size: 100%; */
				.yaoqing-btn{
					width: 100%;
					height: 100%;
					opacity: 0;
				}
			}
			.modal{
				background-color: #FFFFFF;
				border-radius: 15rpx;
				width: 80%;
				height: 290rpx;
				position: absolute;
				top: 35%;
				left: 10%;
				z-index: 100;
				padding: 20rpx;
				box-sizing: border-box;
				.title{
					text-align: center;
					padding: 10rpx 0;
					font-size: 36rpx;
					box-sizing: border-box;
				}
				.content{
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
					margin-bottom: 30rpx;
				}
				.btn-group{
					display: flex;
					height: 80rpx;
					line-height: 80rpx;
					margin-top: 10rpx;
					.coneal{
						width: 50%;
						text-align: center;
					}
					.submit{
						color: #007AFF;
						width: 50%;
						text-align: center;
					}
				}
			}
			.box{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color:#000000;
				opacity: 0.5;
				z-index: 99;
			}
			
			.equi-list{
				height: 350rpx;
				display: flex;
				background-color: #FFFFFF;
				padding: 20rpx;
				box-sizing: border-box;
				
				.equi-sum{
					color: #008cbc;
					width: 35%;
					background-color: #eaeaea;
					border-radius: 20rpx;
					margin-right: 3%;
					text-align: center;
					
					.equi-sum-money{
						font-size: 50rpx;
						font-weight: bolder;
						margin-top: 100rpx;
					}
					.equi-sum-text{
						font-size: 32rpx;
						font-weight: bold;
						margin-top: 30rpx;
					}
				}
				
				.equi-info{
					width: 65%;
					.equi-info-my{
						display: flex;
						
						.equi-info-my-box{
							width: 50%;
							background-color: #eaeaea;
							border-radius: 20rpx;
							margin-left: 3%;
							height: 144rpx;
							
							.equi-info-my-box-money{
								font-size: 36rpx;
								color: #008cbc;
								font-weight: bold;
								text-align: center;
								margin-top: 30rpx;
							}
							.equi-info-my-box-img{
								color: #999999;
								font-size: 28rpx;
								text-align: center;
								margin-top: 10rpx;
								image{
									margin-left: 10rpx;
									vertical-align: middle;
									width: 16rpx;
								}
								
							}
						}
						
					}
					.equi-info-line{
						margin: 20rpx 25rpx;
					}
				}
			}
			
			.order{
				background-color: #FFFFFF;
				margin-top: 20rpx;
				border-radius: 20rpx;
				padding: 40rpx 60rpx;
				color: #999999;
				.order-head{
					display: flex;
					justify-content: space-between;
					.order-head-title{
						
					}
					.order-head-btn{
						font-size: 28rpx;
						image{
							width: 16rpx;
							margin-left: 10rpx;
							vertical-align: middle;
						}
					}
				}
				
				.order-icon{
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					.order-icon-box{
						font-size: 30rpx;
						margin-top: 20rpx;
						display: flex;
						image{
							vertical-align: middle;
							margin-right: 10rpx;
							width: 40rpx;
							height:40rpx;
						}
					}
				}
			}
			
			
			
			
			
			
		}
		.cgtj{
			background-color: #FFFFFF;
			//width: 96%;
			margin: 26rpx auto;
			border-radius: 15rpx;
			padding-bottom: 20rpx;
		}
		.cgtj .head{
			display: flex;
		}
		.cgtj .head .one{
			width: 6%;
			margin: 25rpx 35rpx;
		}
		
		.cgtj .head .cg{
			margin: 20rpx 20rpx 40rpx 0rpx;
		}
		.cgtj .head .gd{
			width: 157rpx;
			margin: 30rpx 0rpx 0rpx 220rpx;
			color: #666666;
			display: flex;
		}
		
		.cgtj .head .gd .jt{
			width: 9%;
			margin-top: 8rpx;
			margin-left: 8rpx;
		}
		
		.cgtj .foot .one{
			height: 100rpx;
			display: flex;
			border-bottom: 1rpx solid #e2dfdf;
			width: 90%;
			margin: 0 auto;
			margin-bottom: 20rpx;
		}
		.cgtj .foot .one image{
			width: 13%;
			border-radius: 50%;
		}
		.cgtj .foot .one .name{
			margin-top: 16rpx;
			margin-left: 50rpx;
			width: 35%;
		}
		
		.cgtj .foot .one .time{
			margin-top: 16rpx;
			width: 40%;
			margin-left: 130rpx;
			font-size: 26rpx;
			color: #999999;
		}
</style>
